<template>
  <div class="login">
    <!-- NavBar 导航组件 -->
    <van-nav-bar title="黑马头条-登陆"/>
    <!-- 表单区域 -->
      <van-form validate-first @failed="onFailed" @submit="hLogin">
        <van-cell-group>
          <!-- Field输入框 -->
          <van-field v-model.trim="mobile"
          label="手机号"
          required
          :rules="[{ pattern:/^1[3-9]\d{9}$/, message: '请输入正确的手机号'}]"
          :error-message=" this.mobile_errmsg "
          placeholder="请输入手机号"/>
          <van-field v-model.trim="code"
            label="密码"
            required
            :rules="[{ pattern: /^\d{6}$/, message: '请输入6位验证码'}]"
            placeholder="请输入密码"/>
        </van-cell-group>
    </van-form>
    <!-- 按钮 -->
    <div class="btn-wrap">
      <van-button type="info" class="btn" @click="hLogin">登陆</van-button>
    </div>
 <p>当前是否有登陆：{{$store.state.tokenInfo.token ? '登陆了': '没有登陆'}}</p>
    <van-button type="info" class="btn" @click="hGetProfile">测试去获取用户个人信息{{$store.state.tokenInfo.token ? '登陆了': '没有登陆'}}</van-button>
  </div>
</template>
<script>
// import ajax from '@/utils/request'
// eslint-disable-next-line no-unused-vars
import { login, getProfile, getInfo } from '@/api/user'
export default {
  name: 'Login',
  data () {
    return {
      mobile: '13912345678',
      code: '246810',
      // 严重错误提示
      mobile_errmsg: '',
      code_errmsg: ''
      // pattern: /\d{6}/
    }
  },
  methods: {
    // 用vant 自带的form验证功能来做校验
    onFailed (errorInfo) {
      // console.log('failed', errorInfo)
    },
    async hGetProfile () {
      // 调用接口，访问用户的信息
      await getProfile()
      // console.log(getProfile())
    },
    check () {
      // 如果验证不通过，返回false
      // 规则：不能为空
      this.mobile_errmsg = this.mobile === '' ? '请输入正确的手机号' : ''
      this.code_errmsg = this.code === '' ? '验证码错误' : ''
      if (this.mobile === '') {
        return false
      }
      if (this.code === '') {
        return false
      }
      return true
    },
    async hLogin () {
      // console.log(this.mobile, this.code)
      // 1.检验
      // （1）验证用户输入数据的有效性
      if (!this.check()) {
        return
      }
      // （2）可以采用cant中的form组件，自带的校验
      // 提示登陆中
      this.$toast.loading({
        duration: 0,
        mask: true,
        message: '登录中...'
      })
      // 2. 向接口发请求，传递参数
      //  1)引入axios 2)根据接口要求，调用axios
      try {
        const result = await login(this.mobile, this.code)
        // 一个页面上只有一个toast，它会把上面的Loading状态覆盖掉
        // 3. 根据接口返回值，做后续处理
        // 登陆成功：1） 保存token到vuex
        // 如何在组件中调用mutations?
        this.$store.commit('mSetTokenInfo', result.data.data)
        const res = await getInfo()
        console.log(res)
        const user = res.data.data
        // 保存到vuex
        this.$store.commit('mSetUserInfo', {
          id: user.id,
          name: user.name,
          photo: user.photo
        })
        // 它自已是3秒之后消失
        this.$toast.success('登陆成功')
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
        // console.log(result)
      } catch (err) {
        this.$toast.fail('登陆失败')
      }
      // 3.根据请求结果，做下一步处理
    }
  }
}

</script>

<style lang="less" scoped>
.login {
  .btn-wrap {
    padding: 20px;
    .btn {
      width: 100%;
      background-color: #6db4fd;
      color: #fff;
    }
    .btn1{
      margin-top: 20px;
      background-color: #6db4fd;
      color: #fff;
    }
  }
}
</style>
